import React, { useEffect, useState } from 'react'
import { Table, Tag, Modal, Popover, Button, Switch } from 'antd';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import axios from 'axios'
export default function () {
  const [dataSource, setDataSource] = useState([])
  useEffect(() => {
    axios.get('http://localhost:8000/users').then(res => {

      setDataSource(res.data)
    })
  }, [])
  const showConfirm = () => {

  }
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '角色名称',
      dataIndex: 'roleId',
    },
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '用户状态',
      dataIndex: 'username',
      render:()=>{
        return <div>
          <Switch></Switch>
        </div>
      }
    },
    {
      title: "操作",
      render: (key) => {
        return <div>
          <Button type="danger" shape="circle" onClick={() => { showConfirm() }} icon={<DeleteOutlined />} />
          <Button type="primary" shape="circle"
            icon={<EditOutlined />}
            onClick={() => {

            }} />
        </div>
      }
    }
  ]
  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey={(item) => item.id}
        pagination={
          { pageSize: 5 }
        } />;
    </div>
  )
}
